<template>
  <div class="data">
    <div>
      <el-button
        v-if="isShow"
        type="warning"
        plain
        @click="getWarningDevice(null, 1)"
      >查看水司所有故障表</el-button>
    </div>
    <el-table
      v-loading="faultCommunityMeterLoading"
      :data="handleFaultCommunityMeterList"
      header-cell-class-name="tableRow"
      cell-class-name="tableRow"
      highlight-current-row
    >
      <el-table-column type="index" label="序号" fixed></el-table-column>
      <el-table-column prop="regionName" label="所属区域" min-width="88"></el-table-column>
      <el-table-column prop="communityName" label="小区名称" min-width="88"></el-table-column>
      <el-table-column prop="faultCount" label="故障表总数" min-width="88"></el-table-column>
      <el-table-column label="故障表详情" min-width="100">
        <template slot-scope="scope">
          <el-button @click="getWarningDevice(scope.row, 0)" type="text" size="small">查看小区故障表</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="title"
      :visible.sync="warningDeviceDialog"
      width="80%"
      :close-on-click-modal="false"
      append-to-body
    >
      <!-- 数据显示 -->
      <el-table
        :data="handleWarningDeviceList"
        header-cell-class-name="tableRow"
        cell-class-name="tableRow"
        v-loading="warningDeviceLoading"
        :stripe="true"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="blockName" label="楼栋/组" min-width="80"></el-table-column>
        <el-table-column prop="deviceNo" label="表地址" width="120"></el-table-column>
        <el-table-column prop="warningType" label="表状态" min-width="88"></el-table-column>
        <el-table-column prop="showValue" label="当前读数" min-width="88"></el-table-column>
        <el-table-column prop="readTime" label="抄表时间" width="135"></el-table-column>
        <el-table-column prop="prShowValue" label="上次读数" min-width="100"></el-table-column>
        <el-table-column prop="lastReadTime" label="上次抄表时间" width="135"></el-table-column>
        <el-table-column prop="imei" label="IMEI" width="120"></el-table-column>
        <!-- <el-table-column prop="completed" label="处理状态" width="80"></el-table-column> -->
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  readingStatusByComm,
  getWarningDeviceList
} from "../../../../api/api";
import moment from "moment";
export default {
  data() {
    return {
      communityMeterList: [], //全部小区
      faultCommunityMeterList: [], // 有故障表的小区
      faultCommunityMeterLoading: false,
      warningDeviceDialog: false,
      warningDeviceLoading: false,
      warningDeviceList: [], // 故障表
      title: "",
      isShow: true
    };
  },
  computed: {
    handleFaultCommunityMeterList: function() {
      var that = this;
      if (this.communityMeterList.length == 0) return;
      this.communityMeterList.forEach(function(item) {
        item.faultCount = item.deviceCount - item.sucessCount;
        if (item.faultCount != 0) {
          that.faultCommunityMeterList.push(item);
        }
      });
      return this.faultCommunityMeterList;
    },
    handleWarningDeviceList: function() {
      var that = this;
      if (this.warningDeviceList.length == 0) return;
      this.warningDeviceList.forEach(function(item) {
        switch (item.warningType) {
          case 0:
            item.warningType = "正常";
            break;
          case 1:
            item.warningType = "无数据";
            break;
          case 2:
            item.warningType = "水量超大";
            break;
        }
        switch (item.completed) {
          case 0:
            item.completed = "待处理";
            break;
          case 1:
            item.completed = "已处理";
            break;
        }
        item.readTime = moment(item.readTime).format("YYYY-MM-DD HH:mm:ss");
        item.lastReadTime = moment(item.lastReadTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      });
      return this.warningDeviceList;
    }
  },
  methods: {
    // 按小区读取抄表数据
    getCommunityMeterStatus() {
      let that = this;
      let msg = {
        enprNo: 'esss',
        operatorId: sessionStorage.getItem("operatorId")
      };
      that.communityMeterLoading = true;
      readingStatusByComm(msg)
        .then(function(res) {
          // console.log(res);
          if (res.data.code === "200") {
            that.communityMeterList = res.data.info;
            that.communityMeterLoading = false;
          } else {
            that.Error("获取数据失败！");
          }
        })
        .catch(function(err) {
          // that.Error(err);
        });
    },
    getWarningDevice(row, flag) {
      let that = this;
      that.warningDeviceDialog = true;
      that.warningDeviceLoading = true;
      that.title =
        flag === 0
          ? row.communityName + "的所有故障表"
          : sessionStorage.getItem("enprName") + "的所有故障表";
      let msg = {
        enprNo: 'esss',
        flag: flag,
        communityName: flag === 0 ? row.communityName : null
      };
      getWarningDeviceList(msg)
        .then(function(res) {
          if (res.data.code === "200") {
            that.warningDeviceList = res.data.data;
            that.warningDeviceLoading = false;
          } else {
            that.Error("获取故障表信息失败！");
          }
        })
        .catch(function(err) {
          // that.Error(err);
        });
    },

    changeIsShow() {
      if (sessionStorage.getItem("userType") === "2") this.isShow = false;
    },

    Error(str) {
      this.$alert(String(str), "提示", {
        confirmButtonText: "确定",
        type: "error"
      });
    }
  },
  mounted() {
    this.getCommunityMeterStatus();
    this.changeIsShow();
  }
};
</script>